/**
 * @file
 * @author ruanairuo(ruanairuo@baijia.com)
 * @date 2020-01-07
 */
import React, {useEffect, useState} from 'react';
import {Empty, Table} from 'antd';
import {numberHandle} from '~/utils/number';
import CommonCard from '../CommonCard';
import './index.styl';

const defaultHeight = 100;

export default function PayBoardCard(props) {
    const {
        unitId, unitName, loading, data, onDownload, onDetail, span = 12,
        height = 0, tableProps, render, ...otherProps
    } = props;
    const [dataSource, setDataSource] = useState([]);
    const [columns, setColumns] = useState([]);

    useEffect(() => {
        const {columnList = [], value = []} = data || {};
        const newColumns = columnList?.map(item => ({
            title: item.name,
            dataIndex: item.name,
            key: item.id,
            width: 100,
            render: render ? render : text => (<span>{text}</span>)
        }));
        setColumns(newColumns);
        setDataSource(value);
    }, [data]);

    return (
        <CommonCard
            title={unitName}
            content={(
                <div
                    className="table-container"
                    style={{width: '100%'}}
                >
                    {
                        dataSource?.length ? (
                            <Table
                                dataSource={dataSource}
                                columns={columns}
                                pagination={{
                                    size: 'small',
                                    defaultPageSize: 10,
                                    showSizeChanger: false
                                }}
                                scroll={{y: height}}
                                size="small"
                                {...tableProps}
                            />
                        ) : <div className="echart-not-data default-height"><Empty /></div>
                    }
                </div>
            )}
            span={span}
            loading={loading}
            cardId={unitId}
            key={unitId}
            onDownload={onDownload}
            onDetail={onDetail}
            height={height + defaultHeight}
            {...otherProps}
        />
    );
}
